import { Modal, Steps, Divider, Button } from 'antd';
import React, {useState, useCallback, useRef, Fragment} from 'react';
import Title from '../../../indemnitySheet/components/Title/Title';
import styles from './index.less';

const { Step } = Steps;

const VerifyStep = props => {
    const { modalVisibleH, handleVerify, historyData} = props;
		
		const fitlerStatus = (v) => {
			if (v.status==='1') {
				return (<span>通过</span>)
			} else if (v.status==='2') {
				return (<span>拒绝</span>)
			} else if (v.status==='0') {
				return (<span>撤回</span>)
			} else if (v.status==='3') {
				return (<span>快速支付</span>)
			}
		}
    return (
        <Modal
					destroyOnClose={true}
					centered
					visible={modalVisibleH}
					onCancel={() => {handleVerify(false)}}
					width={480}
					footer={[
						<div style={{textAlign: "center"}} key="footer">
							<Button onClick={()=>{handleVerify(false)}} type="primary">关闭</Button>
						</div>
					]}
					title={[
						<Title key="title" title="审核流程" />
					]}
        >
					<Steps className={styles.stepBox} progressDot direction="vertical">
						{historyData.map((v, i) => {
							return (
								<Step key={i} status="finish" title={[
									<div key="title2" className={ styles.stepBar }>
										<div>
											<span title={v.auditor} style={{fontSize: "18px", color: "#000", fontWeight: "bold", marginRight: "30px"}}>{v.auditor}</span>
											<span title={v.role}>{v.role}</span>
										</div>
										<div title={v.auditTime}>
											{v.auditTime}
										</div>
									</div>
								]} description={[
									<div key="description2">
										<div style={{textAlign: "right"}}>
											{fitlerStatus(v)}
										</div>
									</div>
								]} />
							)
						})}
					</Steps>
        </Modal>
    )
}

export default VerifyStep;